import Sortablejs from 'sortablejs/Sortable.js'
import { ref } from 'vue'
import { articleSort } from '../../../../api/article'
import { ElMessage } from 'element-plus'
import i18n from '../../../../i18n/index'
export const tableRef = ref(null)
export const initSortable = (tableData: any, cb: any) => {
  // 设置拖拽效果
  // @ts-ignore
  // const el = tableRef.value.$el.querySelector(
  //   '.el-table__body-wrapper>div>div>div>table>tbody'
  // )
  const el = document.querySelector('tbody')
  // 1. 要拖拽的元素
  // 2. 配置对象
  Sortablejs.create(el, {
    // 拖拽时类名
    ghostClass: 'sortable-ghost',
    // 拖拽结束的回调方法
    async onEnd(event: any) {
      const { newIndex, oldIndex } = event

      await articleSort({
        initRanking: tableData.value[oldIndex].ranking,
        finalRanking: tableData.value[newIndex].ranking
      })
      ElMessage.success(i18n.global.t('msg.article.sortSuccess'))
      tableData.value = []
      cb && cb()
    }
  })
}
